<template>
   <div>
	<el-card style="width: 800px;">
		<el-form ref="formObj" :model="poor" :rules="poorRules" label-width="120px">
		  <div class="form-row">
			<el-form-item class="form-item" label="姓名" prop="name">
			  <el-input v-model="poor.name" maxlength="15" ></el-input>
			</el-form-item>
			<el-form-item class="form-item" label="身份证号" prop="idNumber">
			  <el-input v-model="poor.idNumber" maxlength="18"></el-input>
			</el-form-item>
		  </div>
		  <div class="form-row">
			<el-form-item class="form-item" label="民族" prop="nation">
			  <el-input v-model="poor.nation" maxlength="15"></el-input>
			</el-form-item>
			<el-form-item class="form-item" label="性别" prop="sex">
			  <el-select v-model="poor.sex">
				<el-option label="女" :value="0"></el-option>
				<el-option label="男" :value="1"></el-option>
			  </el-select>
			</el-form-item>
		  </div>
		  <div class="form-row">
			<el-form-item class="form-item" label="是否是户主" prop="isHead">
			  <el-radio-group v-model="poor.isHead" disabled>
				<el-radio :label="true">是</el-radio>
				<el-radio :label="false">否</el-radio>
			  </el-radio-group>
			</el-form-item>
			<el-form-item class="form-item" label="与户主关系" prop="relation">
			  <el-input v-model="poor.relation" maxlength="50"></el-input>
			</el-form-item>
		  </div>
		  <div class="form-row">
			<el-form-item class="form-item" label="是否享有医保" prop="insurance">
			  <el-radio-group v-model="poor.insurance">
				<el-radio :label="true">是</el-radio>
				<el-radio :label="false">否</el-radio>
			  </el-radio-group>
			</el-form-item>
			<el-form-item class="form-item" label="是否享有低保" prop="basic">
			  <el-radio-group v-model="poor.basic">
				<el-radio :label="true">是</el-radio>
				<el-radio :label="false">否</el-radio>
			  </el-radio-group>
			</el-form-item>
		  </div>
		  <div class="form-row">
			<el-form-item class="form-item" label="工作情况" prop="work">
			  <el-input v-model="poor.work" type="textarea" :rows="4" maxlength="250"></el-input>
			</el-form-item>
			<el-form-item class="form-item" label="健康情况" prop="health">
			  <el-input v-model="poor.health" type="textarea" :rows="4" maxlength="250"></el-input>
			</el-form-item>
		  </div>
		</el-form>
	</el-card>
	<div class="save">
		 <el-button style="margin-top: 10px;" type="success" @click="save" :icon="Save">提交</el-button>
	</div>
   </div>
</template>
  
<script setup>
import url from './util' 
import { ref ,onMounted ,watch ,reactive} from 'vue'
import Save from '@/components/icons/save' 
import { ElMessage } from 'element-plus'
import { post, get, request } from '@/axios'

const props = defineProps(['id','fId'])
const emits = defineEmits(['update:show','getPoorData'])
const formObj = ref()
const poor = ref({
	id: null,
    idNumber: '',
    name: '',
	nation: '',
	sex: null,
	isHead: false,
	relation: '',
	work: '',
	health: '',
	insurance: null,
	basic: null,
	fId: props.fId
})
function checkPoor (rule, value, callback) {
	get("/poor/check",{ id:props.id, value, field: 'id_number'}, content => {
		if (content) {
			callback()
		} else {
			callback(new Error())
		}
	})
}

const poorRules = reactive({
	name: [
		{ required: true, message: '请输入姓名', trigger: 'blur' },
	],
	idNumber: [
		{ required: true, message: '请输入身份证号', trigger: 'blur' },
		{ pattern: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/, message: '请输入正确的中国身份证号', trigger: 'blur' },
		{ validator: checkPoor, message: '该身份证号已经存在', trigger: 'blur' }
	],
	nation: [
		{ required: true, message: '请输入民族', trigger: 'blur' },
	],
	sex: [
		{ required: true, message: '请选择性别', trigger: 'blur' },
	],
	isHead: [
		{ required: true, message: '请选择是否是户主', trigger: 'blur' },
	],
	relation: [
		{ required: true, message: '请输入与户主关系', trigger: 'blur' },
	],
	work: [
		{ required: true, message: '请输入工作情况', trigger: 'blur' },
	],
	health: [
		{ required: true, message: '请输入健康情况', trigger: 'blur' },
	],
	insurance: [
		{ required: true, message: '请选择是否有医保', trigger: 'blur' },
	],
	basic: [
		{ required: true, message: '请选择是否有低保', trigger: 'blur' },
	]
})

function save () {
	post(props.id ? url.update : url.add,poor.value,content => {
		emits('update:show',false)
		emits('getPoorData')
	},formObj)
}

// update板块
if(props.id) {
	poor.value.id = props.id
	getById()
}
function getById () {
	get(url.getById,{ id: poor.value.id},content => {
		for (const key in poor.value) {
			if (Object.prototype.hasOwnProperty.call(content,key)) {
				poor.value[key] = content[key]
			}
		}
	})
}

</script>
  
<style scoped lang="scss">
.form-row {
  display: flex;
  gap: 20px; 
  margin-top: 10px;
  .form-item {
    flex: 1; 
  }
}
.save {
	display: flex;
	justify-content: center;
	align-items: center;
}

</style>